<template>
    <div>
        <!-- :title="formState.modalTitle" -->
        <a-modal
        :dialog-style="{ top: '20px' }"
         v-model:visible="otherInforVisible" 
         width="70%"
        >
            <template slot="title">
                <div style="width: 100%;display: flex;">
                    <span  class="modal-header-left-title">{{ formState.modalTitle }}</span>
                    <!-- <span class="modal-header-conter-title" v-if="formState.modalTitle == '证照信息'">证件编号:桂20160104</span> -->
                </div>
            </template>
            <div v-if="formState.modalTitle == '证照信息'" class="enterpriseInformation-otherInfor-zzxx">
                <!-- <a-form
                    layout="horizontal" 
                    class="enterpriseInformation-otherInfor-from" >
                        <a-form-item label="分类码">
                            <a-input disabled defaultValue="AhzChDhz"/>
                        </a-form-item>
                        <a-form-item label="签发人">
                            <a-input disabled defaultValue="孙国雄"/>
                        </a-form-item>
                        <a-form-item label="发证机关">
                            <a-input disabled defaultValue="xx壮族自治区药品监督管理局"/>
                        </a-form-item>
                        <a-form-item label="日常监管管理机构">
                            <a-input disabled defaultValue="xx壮族自治区药品监督管理局"/>
                        </a-form-item>
                        <a-form-item label="有效期始">
                            <a-input disabled defaultValue="2021-01-01"/>
                        </a-form-item>
                        <a-form-item label="有效期止">
                            <a-input disabled defaultValue="2025-12-31"/>
                        </a-form-item>
                        <a-form-item label="发证日期">
                            <a-input disabled defaultValue="2023-05-18"/>
                        </a-form-item>
                </a-form> -->
                <commpVxeTable
                    :key="refreshTable"
                    ref="headmanVxeTable"
                    :config="{
                        api:assessCheckApi.spcyQyInfoqueryQyZjxxPageList,
                        rowId: 'id',
                        paramet:{
                            fqyid:formState.id
                        }
                    }" 
                    :isCanWrap="true"
                    :columns="documentInformationColumnsVxe" 
                    :formItem="documentInformationFormItem"
                    :occupancyHeight="250"
                > 
                    <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                        <a-form layout="inline" class="search-form" >
                            <a-form-item>
                                <a-button class="blue-btn" type="primary" @click="documentInformationView(row,9,'查看')" >查看</a-button>
                            </a-form-item>
                        </a-form> 
                    </template>
                </commpVxeTable>
            </div>
            <div v-if="formState.modalTitle == '设备设施'">
                <!-- :adaptiveHeight="true" -->
                <commpVxeTable
                    :key="refreshTable"
                    ref="headmanVxeTable"
                    :config="{
                        api:assessCheckApi[formState.interfaceType],
                        rowId: 'id',
                        height:400,
                        autoHidden:true,
                        paramet:{
                            fqyid:formState.id
                        }
                    }" 
                    :tableData="facilityData"
                    :columns="deviceColumnsVxe" 
                    :formItem="[]"
                    :adaptiveHeight="true"
                > 
                    <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                        <a-form layout="inline" class="search-form" >
                            <a-form-item >
                                <a-button class="blue-btn" type="primary" @click="facilityClick(row)">查看详情</a-button>
                            </a-form-item>
                        </a-form> 
                    </template>
                </commpVxeTable>
            </div>
            <div v-if="formState.modalTitle == '质量体系'">
                <commpVxeTable
                    :key="refreshTable"
                    ref="headmanVxeTable"
                    :config="{
                        api:assessCheckApi[formState.interfaceType],
                        rowId: 'id',
                        height:400,
                        autoHidden:true,
                        paramet:{
                            fqyid:formState.id,
                            fwjlx1:'质量管理体系文件'
                        }
                    }" 
                    :columns="WjljByTypeColumnsVxe" 
                    :formItem="[]"
                    :adaptiveHeight="true"
                > 
                
                    <template v-slot:name_fwjxsmc="{row}" data-desc="自定操作栏">
                        <span>{{ row.fwjxsmc }}{{ row.fwjlx }}</span>
                    </template>
                    <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                        <a-form layout="inline" class="search-form" >
                            <a-form-item>
                                <a-button class="blue-btn" type="primary" >查看</a-button>
                            </a-form-item>
                            
                        </a-form> 
                    </template>
                </commpVxeTable>
            </div>
            <div v-if="formState.modalTitle == '关键人员'">
                <div class="enterprise-review-tabs">
                    <a-tabs type="card" v-model:activeKey="KeyPersonActiveKey" @change="KeyPersonActiveChange">
                        <a-tab-pane key="人员信息" tab="人员信息"></a-tab-pane>
                        <a-tab-pane key="岗位变更记录" tab="岗位变更记录"></a-tab-pane>
                    </a-tabs>
                </div>
                <commpVxeTable
                    v-if="KeyPersonActiveKey == '人员信息'"
                    :key="refreshTable"
                    ref="headmanVxeTable"
                    :config="{
                        api:assessCheckApi[formState.interfaceType],
                        rowId: 'id',
                        paramet:{
                            fqyid:formState.id
                        }
                    }" 
                    :columns="enterpriseColumnsVxe" 
                    :formItem="[]"
                    :isCanWrap="true"
                    :occupancyHeight="80"
                > 
                    <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                        <a-form layout="inline" class="search-form" >
                            <a-form-item>
                                <a-button class="blue-btn" type="primary" @click="documentInformationView(row,0,'查看')" >查看</a-button>
                            </a-form-item>
                        </a-form> 
                    </template>
                </commpVxeTable>
                <commpVxeTable
                    v-if="KeyPersonActiveKey == '岗位变更记录'"
                    :key="refreshTable"
                    ref="headmanVxeTable"
                    :config="{
                        api:assessCheckApi.spcyQyInfoqueryQyRyBgjlPageList,
                        rowId: 'id',
                        paramet:{
                            fqyid:formState.id
                        }
                    }" 
                    :columns="gwbgpriseColumnsVxe" 
                    :formItem="[]"
                    :isCanWrap="true"
                    :occupancyHeight="80"
                > 
                </commpVxeTable>
            </div>
            <div v-if="formState.modalTitle == '历次审评'">
                <commpVxeTable
                    :key="refreshTable"
                    ref="headmanVxeTable"
                    :config="{
                        api:assessCheckApi[formState.interfaceType],
                        rowId: 'id',
                        height:400,
                        autoHidden:true,
                        paramet:{
                            fqyid:formState.id
                        }
                    }" 
                    :columns="inspectColumnsVxe" 
                    :formItem="[]"
                    :adaptiveHeight="true"
                > 
                    <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                        <a-form layout="inline" class="search-form" >
                            <a-form-item>
                                <a-button class="blue-btn" type="primary" >查看</a-button>
                            </a-form-item>
                        </a-form> 
                    </template>
                </commpVxeTable>
            </div>
            <div v-if="formState.modalTitle == '变更项记录'">
                <commpNormalTable
                    :key="refreshTable"
                    ref="headmanVxeTable"
                    :config="{
                        api:assessCheckApi[formState.interfaceType],
                        rowId: 'id',
                        height:400,
                        autoHidden:true,
                        paramet:{
                            fqyid:formState.id
                        }
                    }" 
                    :tableData="tableData"
                    :columns="changeColumnsVxe" 
                    :formItem="[]"
                    :adaptiveHeight="true"
                > 
                    <template v-slot:fbgnr_name="{row}">
                        <a-textarea 
                            readonly
                            v-model:value="row.fbgnr"
                            :rows="4"
                        ></a-textarea>
                    </template>
                    <template v-slot:fbgbz_name="{row}">
                        <a-textarea 
                            readonly
                            v-model:value="row.fbgbz"
                            :rows="4"
                        ></a-textarea>
                    </template>
                    <template v-slot:fbgsj_name="{row}">
                        <a-input style="width: 100px;" v-model:value="row.fbgsj" disabled/>
                    </template>
                    <template v-slot:fsfdy_name="{row}">
                        <div style="display: flex;justify-content: center;align-items: center;height: 100%;">
                            <a-checkbox readonly :checked="true"></a-checkbox>
                        </div>
                        
                    </template>
                </commpNormalTable>
            </div>
            <template slot="footer">
                <div>
                    <a-button @click="handleCancel" style="margin-right: 10px;">关闭</a-button>
                    <a-button v-if="false" @click="handleOk" type='primary'>确定</a-button>
                </div>
            </template>
        </a-modal>
        <facilityDetails ref="facilityRef" />
        <addEdit9 ref="addEditRef9"/>
        <addEdit0 ref="addEditRef0"/>
    </div>
</template>
<script>
import assessCheckApi from './service/api'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import commpNormalTable from '@/components/commp-vxe-table/commp-normal-table.vue'
import facilityDetails from './facilityDetails.vue'
import addEdit9 from '../enterprise/information/addEdit9.vue'
import addEdit0 from '../enterprise/information/addEdit0.vue'
export default {
    components:{
        commpVxeTable,
        commpNormalTable,
        facilityDetails,
        addEdit9,
        addEdit0,
    },
    props:{

    },
    data(){
        return{
            KeyPersonActiveKey:'人员信息',
            assessCheckApi:assessCheckApi,
            formState:{},
            otherInforVisible:false,
            refreshTable:null,
            facilityData:[{
                fyzmc:'ASMPS-6.8安瓿水浴灭菌柜性能确认',
                fyzfabh:'SOP-VM-11-205-23',
                fyzbgbh:'R-VM-11-205-23',
                fbz:'',
                id:1,
                forder:1,
            },{
                fyzmc:'AJDZ80型安瓿自动灯检机性能确认',
                fyzfabh:'SOP-VM-11-P207-23',
                fyzbgbh:'R-VM-11-P207-23',
                fbz:'',
                id:2,
                forder:2,
            }],
            deviceColumnsVxe:[{
                title: '序号', //列头显示文字
                field: 'forder',
                width:60
            },{
                title: '设备名称', //列头显示文字
                field: 'fyzmc',
            }
            // ,{
            //     title: '确认类型', //列头显示文字
            //     field: 'fwjlx1',
            // }
            ,{
                title: '确认方案编号', //列头显示文字
                field: 'fyzfabh',
            },{
                title: '确认报告编号', //列头显示文字
                field: 'fyzbgbh',
            },{
                title: '备注', //列头显示文字
                field: 'fbz',
            },{
                    title: '操作',
                    field: 'id',
                    slots: {
                        // 使用插槽模板渲染
                        default: 'operation_btn',
                    },
                    width:180,
                    fixed:'right'
            }],
            WjljByTypeColumnsVxe:[{
                title: '文件名称', //列头显示文字
                field: 'fwjxsmc',
                slots: {
                    // 使用插槽模板渲染
                    default: 'name_fwjxsmc',
                },
            },{
                title: '上传日期', //列头显示文字
                field: 'createTime',
            },{
                    title: '操作',
                    field: 'id',
                    slots: {
                        // 使用插槽模板渲染
                        default: 'operation_btn',
                    },
                    width:250,
                    fixed:'right'
            }],
            enterpriseColumnsVxe:[{
                title: '关键人员', //列头显示文字
                field: 'fgjry',
            },{
                title: '人员类型', //列头显示文字
                field: 'frylx',
            },{
                title: '身份证号', //列头显示文字
                field: 'fsfzh',
                width:185,
            },{
                title: '工作经历', //列头显示文字
                field: 'fgzjl',
            },{
                title: '职称', //列头显示文字
                field: 'fzc',
            },{
                title: '学历', //列头显示文字
                field: 'fxl',
            },{
                title: '学位', //列头显示文字
                field: 'fxw',
            },{
                title: '专业', //列头显示文字
                field: 'fzy',
            },{
                title: '联系电话', //列头显示文字
                field: 'flxdh',
            },{
                title: '邮箱', //列头显示文字
                field: 'fyx',
            },{
                title: '座机号', //列头显示文字
                field: 'fzjh',
            },{
                    title: '操作',
                    field: 'id',
                    slots: {
                        // 使用插槽模板渲染
                        default: 'operation_btn',
                    },
                    width:180,
                    fixed:'right'
            }],
            inspectColumnsVxe:[{
                title: '审评部门', //列头显示文字
                field: 'fjcry',
            },{
                title: '审评类型', //列头显示文字
                field: 'fjclx',
            },{
                title: '审评结论', //列头显示文字
                field: 'fjcjl',
            },{
                title: '整改情况', //列头显示文字
                field: 'fzgqk',
            },{
                title: '审评时间', //列头显示文字
                field: 'fjcsj',
            },{
                    title: '操作',
                    field: 'id',
                    slots: {
                        // 使用插槽模板渲染
                        default: 'operation_btn',
                    },
                    width:180,
                    fixed:'right'
            }],
            gwbgpriseColumnsVxe:[{ 
                type: 'checkbox', 
                width: 60 ,
                fixed: 'left'
            },{
                title: '关键人员', //列头显示文字
                field: 'fgjry',
            },{
                title: '人员类型', //列头显示文字
                field: 'frylx',
            },{
                title: '身份证号', //列头显示文字
                field: 'fsfzh',
                width:185,
            },{
                title: '工作经历', //列头显示文字
                field: 'fgzjl',
            },{
                title: '职称', //列头显示文字
                field: 'fzc',
            },{
                title: '学历', //列头显示文字
                field: 'fxl',
            },{
                title: '学位', //列头显示文字
                field: 'fxw',
            },{
                title: '专业', //列头显示文字
                field: 'fzy',
            },{
                title: '联系电话', //列头显示文字
                field: 'flxdh',
            },{
                title: '邮箱', //列头显示文字
                field: 'fyx',
            },{
                title: '座机号', //列头显示文字
                field: 'fzjh',
            },{
                title: '变更后岗位', //列头显示文字
                field: 'fbghgw',
            },{
                title: '变更时间', //列头显示文字
                field: 'createTime',
            }],
            // readonly
            tableData:[{
                fbgnr:'同意该企业《药品生产许可证》增加C类码，接受桂林南药股份有限公司委托生产复方甘草片，国药准字H45020332，批准文号有效期至2025-08-17；其他内容不变。',
                fbgbz:'',
                fbgsj:'2022-09-21',
                fpxh:'第3页，4号',
                fsfdy:'是',
                id:1
            },{
                fbgnr:'1.同意该企业在xx南宁市金阳路39号地址核增生产范围“原料药（盐酸罗通定）”；2.该企业核增的盐酸罗通定生产线符合GMP要求；其他内容不变。',
                fbgbz:'',
                fbgsj:'2022-10-18',
                fpxh:'第3页，5号',
                fsfdy:'是',
                id:2
            },{
                fbgnr:'同意该企业《药品生产许可证》企业负责人由杜日建变更为周健,社会信用代码由71889860-6变更为91450100718898604；其它内容不变。',
                fbgbz:'',
                fbgsj:'2016-02-01',
                fpxh:'第1页，1号',
                fsfdy:'是',
                id:3
            },{
                fbgnr:'同意该企业《药品生产许可证》质量负责人由陈月菊变更为林桥辉；其它内容不变。',
                fbgbz:'',
                fbgsj:'2017-04-27',
                fpxh:'第1页，2号',
                fsfdy:'是',
                id:4
            },{
                fbgnr:'同意该企业生产负责人由张乃汉变更为幸林广；其他内容不变。',
                fbgbz:'',
                fbgsj:'2017-10-26',
                fpxh:'第1页，3号',
                fsfdy:'是',
                id:5
            },{
                fbgnr:'同意该企业在原生产地址之外，新增地址“2、南宁市金阳路39号”，新增生产范围“中药前处理和提取***”；其它内容不变。',
                fbgbz:'',
                fbgsj:'2018-08-07',
                fpxh:'第1页，4号',
                fsfdy:'是',
                id:6
            },{
                fbgnr:'同意该公司《药品生产许可证》在原生产地址之外，新增生产地址和生产范围：“3、南宁市西乡塘区园艺路99号：大容量注射剂***”。',
                fbgbz:'',
                fbgsj:'2019-01-08',
                fpxh:'第1页，5号',
                fsfdy:'是',
                id:7
            },{
                fbgnr:'同意该企业《药品生产许可证》在生产地址“南宁市金阳路39号”，新增生产范围“片剂，硬胶囊剂，颗粒剂”。',
                fbgbz:'',
                fbgsj:'2019-06-17',
                fpxh:'第1页，6号',
                fsfdy:'是',
                id:8
            },{
                fbgnr:'同意该企业生产负责人由幸林广变更为林广；其他内容不变。',
                fbgbz:'',
                fbgsj:'2019-06-24',
                fpxh:'第2页，1号',
                fsfdy:'是',
                id:9
            },{
                fbgnr:'同意该企业《药品生产许可证》在原生产地址“南宁市金阳路39号”，新增生产范围“小容量注射剂(非最终灭菌)，糖浆剂，口服混悬剂，口服溶液剂，合剂，凝胶剂***”；其它内容不变。',
                fbgbz:'',
                fbgsj:'2019-08-16',
                fpxh:'第2页，2号',
                fsfdy:'是',
                id:10
            },{
                fbgnr:'同意该企业《药品生产许可证》在原生产地址“南宁市金阳路39号”，新增生产范围“片剂（含激素类），散剂，锭剂，原料药（氢氧化铝、铝碳酸镁、司坦唑醇、维生素U、维生素UⅡ）***”；其它内容不变。',
                fbgbz:'',
                fbgsj:'2019-10-30',
                fpxh:'第2页，3号',
                fsfdy:'是',
                id:11
            },{
                fbgnr:'同意该企业《药品生产许可证》中法定代表人由“王静宇”变更为“郭雄”；其它内容不变。',
                fbgbz:'',
                fbgsj:'2019-11-11',
                fpxh:'第2页，4号',
                fsfdy:'是',
                id:12
            },{
                fbgnr:'同意该企业《药品生产许可证》在原生产地址基础上，核减“南宁市西乡塘区园艺路99号：大容量注射剂***”的生产地址和生产范围；其它内容不变。',
                fbgbz:'',
                fbgsj:'2019-12-13',
                fpxh:'第2页，5号',
                fsfdy:'是',
                id:13
            },{
                fbgnr:'同意该企业《药品生产许可证》中注册地址由“xx南宁市中尧南路2号”变更为“xx南宁市金阳路39号”；其它内容不变。',
                fbgbz:'',
                fbgsj:'2020-01-13',
                fpxh:'第2页，6号',
                fsfdy:'是',
                id:14
            },{
                fbgnr:'同意该企业生产负责人由林广变更为幸林广；其他内容不变。',
                fbgbz:'',
                fbgsj:'2020-04-24',
                fpxh:'第3页，1号',
                fsfdy:'是',
                id:15
            },{
                fbgnr:'同意该企业核减《药品生产许可证》生产地址和生产范围“南宁市中尧南路2号：中药前处理和提取，凝胶剂，硬胶囊剂，口服溶液剂，颗粒剂，原料药（八角茴香油、司坦唑醇、氢氧化铝、铝碳酸镁、维生素U、菠萝蛋白酶），片剂（含激素类），糖浆剂，散剂，合剂，锭剂，口服混悬剂，小容量注射剂（非最终灭菌）”；其他内容不变。',
                fbgbz:'',
                fbgsj:'2020-07-09',
                fpxh:'第3页，2号',
                fsfdy:'是',
                id:16
            },{
                fbgnr:'同意该企业生产负责人由“幸林广”变更为“王震虎”；其他内容不变。',
                fbgbz:'',
                fbgsj:'2022-07-08',
                fpxh:'第3页，3号',
                fsfdy:'是',
                id:17
            },{
                fbgnr:'同意你公司生产负责人由“王震虎”变更为“李华”；其他内容不变。',
                fbgbz:'',
                fbgsj:'2023-05-18',
                fpxh:'第3页，6号',
                fsfdy:'是',
                id:18
            }],
            changeColumnsVxe:[{
                title: '变更内容', //列头显示文字
                field: 'fbgnr',
                slots: {
                    // 使用插槽模板渲染
                    default: 'fbgnr_name',
                },
            },{
                title: '变更备注', //列头显示文字
                field: 'fbgbz',
                slots: {
                    // 使用插槽模板渲染
                    default: 'fbgbz_name',
                },
            },{
                title: '变更时间', //列头显示文字
                field: 'fbgsj',
                slots: {
                    // 使用插槽模板渲染
                    default: 'fbgsj_name',
                },
                width:150
            },{
                title: '排序号', //列头显示文字
                field: 'fpxh',
                width:150
            },{
                title: '是否打印', //列头显示文字
                field: 'fsfdy',
                slots: {
                    // 使用插槽模板渲染
                    default: 'fsfdy_name',
                },
                width:100
            }],
            documentInformationFormItem:[{
                label: '证件名称',
                model: 'fzjmc',
            },{
                label: '证件编号',
                model: 'fzjbh',
            },{
                label: '证件分类',
                model: 'fzjfl',
            },{
                label: '是否过期',
                model: 'sfgq',
                placeholder: '是否过期',
                type:'Select',
                dictionaryType:'企业证件是否过期',
                
            }],
            //证件信息
            documentInformationColumnsVxe:[{ 
                type: 'checkbox', 
                width: 60 ,
                fixed: 'left'
            },{
                title: '证件名称', //列头显示文字
                field: 'fzjmc',
            },{
                title: '证件编号', //列头显示文字
                field: 'fzjbh',
            },{
                title: '证件分类', //列头显示文字
                field: 'fzjfl',
            },{
                title: '发证日期', //列头显示文字
                field: 'ffzrq',
            },{
                title: '发证单位', //列头显示文字
                field: 'ffzdw',
            },{
                title: '证件有效期', //列头显示文字
                field: 'fzjyxq',
            },{
                title: '是否过期',
                field: 'sfgq',
            },{
                    title: '操作',
                    field: 'id',
                    slots: {
                        // 使用插槽模板渲染
                        default: 'operation_btn',
                    },
                    width:180,
                    fixed:'right'
            }],

        }
    },
    watch:{

    },
    mounted(){
        
    },
    methods:{
        getData(val){
            this.formState = val
            this.refreshTable = Date.now()
        },
        KeyPersonActiveChange(){
            this.refreshTable = Date.now()
        },
        documentInformationView(val,index,view){
            //console.log(val)
            let refName = 'addEditRef'+index
            this.$refs[refName].getData({fqyid:this.formState.id,...val,index:index,view:view?true:false})
            this.$refs[refName].visible = true
        },
        handleCancel(){
            this.otherInforVisible = false
        },
        handleOk(){
            this.otherInforVisible = false
        },
        detailSituationClick(row){
            this.$message.warning('开发中，敬请期待！')
        },
        facilityClick(row){
            this.$refs.facilityRef.facilityDetailsVisible = true
            this.$refs.facilityRef.getData(row)
        },
    }
}
</script>
<style lang="less">
.enterpriseInformation-otherInfor-zzxx{
    .enterpriseInformation-otherInfor-from{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .ant-form-item{
            width: 50%;
            display: flex;
            align-items: center;
            .ant-form-item-label{
                width: 130px;
            }
            .ant-form-item-control-wrapper{
                flex: 1;
            }
        }
        
    }
.ant-input-disabled{
    background-color: #fff;
    color: rgba(0, 0, 0, 0.85);
}
}

.modal-header-left-title{
    margin: 0;
    color: rgba(0,0,0,.85);
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    word-wrap: break-word;
}
.modal-header-conter-title{
    flex: 1;
    text-align: center;
    font-size: 1.17em;
    color: rgba(0, 0, 0, 0.85);
    font-weight: 500;
}
</style>